<script setup>

    import { ref } from 'vue'
    import ModifyInfo from '@/components/user/ModifyInfo.vue'
    import ModifyAvatar from '@/components/user/ModifyAvatar.vue'
    import ModifyPassword from '@/components/user/ModifyPassword.vue'

    const activeTab = ref('info'); // 默认选中的选项卡为修改信息
</script>

<template>
    <div class="personal-center">
        <el-tabs v-model="activeTab" type="card">
            <!-- 修改信息选项卡 -->
            <el-tab-pane label="修改信息" name="info">
                <ModifyInfo />
            </el-tab-pane>

            <!-- 修改头像选项卡 -->
            <el-tab-pane label="修改头像" name="avatar">
                <ModifyAvatar />
            </el-tab-pane>

            <!-- 修改密码选项卡 -->
            <el-tab-pane label="修改密码" name="password">
                <ModifyPassword />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style scoped>
    .personal-center {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
</style>